import { alert } from 'antd-mobile/es/components/dialog/alert';
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import {  Modal } from 'antd';
function Login() {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const navigate = useNavigate()
    const [isModalOpen, setIsModalOpen] = useState(false);
    const handleOk = () => {
      setIsModalOpen(false);
    };
    const handleCancel = () => {
      setIsModalOpen(false);
    };
    const handleSubmit = (e) => {
        e.preventDefault();
        if (username === 'admin' && password === '123456') {
            localStorage.setItem('token', 'admin')
            navigate('/home')
        }else{
            setIsModalOpen(true);
        }
    };
    return (
        <div className="login-container">
            <h2 className="login-title" >登录</h2>
            <form onSubmit={handleSubmit}>
                <div className="form-group">
                    <label htmlFor="username">用户名</label>
                    <input
                        type="text"
                        id="username"
                        value={username}
                        onChange={(e) => setUsername(e.target.value)}
                        placeholder="请输入用户名"
                    />
                </div>
                <div className="form-group">
                    <label htmlFor="password">密码</label>
                    <input
                        type="password"
                        id="password"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        placeholder="请输入密码"
                    />
                </div>
                <button type="submit" className="submit-btn" >
                    登录
                </button>
            </form>
            <Modal title="温馨提示" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <p>您输入的密码或账户错误请重新输入</p>
      </Modal>
        </div>
    )
}
export default Login